@import "../assets/sass/variables";
@import "../assets/sass/mixin";

.free-main {
  height: 100%;
  &.free-main-mini {
    transition: -webkit-transform .5s cubic-bezier(.2, 1, .3, 1);
    transition: transform .5s cubic-bezier(.2, 1, .3, 1);
    transition: transform .5s cubic-bezier(.2, 1, .3, 1), -webkit-transform .5s cubic-bezier(.2, 1, .3, 1);
    -webkit-transform-origin: 50vw 50vh;
    transform-origin: 50vw 50vh;
    -webkit-transform: perspective(1000px) translate3d(0, 50vh, 0) rotateX(30deg);
    transform: perspective(1000px) translate3d(0, 50vh, 0) rotateX(30deg);
    pointer-events: none;
  }
}

.search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  z-index: 1050;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
  transition-timing-function: cubic-bezier(.2,1,.3,1);
  background: linear-gradient(90deg,#171749,#413789);

  button {
    position: absolute;
    top: 3rem;
    right: 3rem;
    font-size: 1.5rem;
  }

  input {
    color: #fff;
    border-bottom: 4px solid #a1a1e5;
    font-size: 7vw;
    width: 75%;
  }
}

:host-context(.free-mini) /deep/ {

  .main-layout-container {
    left: $leftMenuWidthOfMini;
  }

  .left-menu {
    .accordion-item .accordion-toggle i {
      padding-right: 0 !important;
    }

    .accordion-toggle:hover + .accordion-content {
      @include position(absolute, 0, $left: 45px);
      height: auto;
    }
  }

  .aside-header {
    width: $leftMenuWidthOfMini;
  }

  .aside-header-inner {
    & > span {

      &.top-logo-mini {
        display: block;
      }

      &.top-logo {
        display: none;
      }
    }
  }
  .main-layout-container {
    left: 0 !important;
  }

  .left-menu {
    left: -#{$leftMenuWidth} !important;
  }

  .aside-header-inner {
    & > span {

      &.top-logo-mini {
        display: none !important;
      }

      &.top-logo {
        display: block !important;
      }
    }
  }
}
